<template>
  <div class="container clearfix">
    <div class="empty"
         v-if="!shopList||shopList.length==0">
      <img src="https://img.ameimeika.com/h5_images/mp_images/mp_3.0/search/nocar.png"
           v-if="ImgBaseUrl"
           alt=""
           mode="widthFix"
           class="img">
      <div class="msg">购物车空空如也～</div>
      <div class="btn"
           @click="to_mall()">
        去逛逛
      </div>
    </div>
    <p class="total"
       v-if="shopList.length > 0">
      <!-- 共计<span class="totalNum">{{shopList.length}}</span> 件商品 -->
      <span class="editBtn"
            @click="editBtn(isFinshed)"
            v-text="text"></span>
    </p>
    <scroll-view :scroll-y="true"
                 :style="{'height': '100%'}"
                 class="scroll_view">
      <div class="mall"
           v-for="(item,index) in shopList"
           :key="index"
           :class="{'padding_bottom':index == shopList.length -1}">
        <div class="left"
             v-if="!isFinshed">
          <input type="radio"
                 class="radio"
                 :key="index+1"
                 @click="selected(item)"
                 :checked="item.checked && item.is_del == 0"
                 style="'background':'#fff','color':'#444'"
                 :disabled="item.is_del == 1 || item.is_del == 2"
                 color="#ff383e" />
        </div>
        <div class="left"
             v-if="isFinshed">
          <input type="radio"
                 class="radio"
                 :key="index+1"
                 @click="selected(item)"
                 :checked="item.checked"
                 style="'background':'#fff','color':'#444'"
                 color="#ff383e" />
        </div>
        <div class="right">

          <div class="imgbox"
               @click="shop_det(item)"
               :class="item.is_del==1?'filterClass':''">
            <img :src="imgUrl+item.images"
                 alt
                 class="mall_img" />
            <div class="greay_bg"
                 v-if="item.is_del ==1 || item.is_del ==2"></div>
          </div>
          <div class="content">
            <div v-if="item.is_del ==1"
                 class="mall_status">已下架</div>
            <div v-if="item.is_del ==2"
                 class="mall_status">库存不足</div>
            <div class="mall_name">
              <div v-if="item.cross_border == 1"
                   class="icon"></div>
              {{item.title}}

            </div>
            <div class="plus"
                 v-if="item.plus_title&&item.plus_title!=''">
              {{item.plus_title}}
            </div>
            <div class="mall_specs">{{item.spec_stem}}</div>

            <div class="mall_price clearfix">
              <div class="pay_type">
                <p class="cent_dk"
                   v-if="item.deduction_credit >0">积分可抵￥{{item.deduction_credit}}</p>
                <p class="money"
                   v-if="item.price != null">
                  <span class="money_cent">￥</span>
                  {{item.price}}
                </p>
                <p class="money"
                   v-if="item.price == null">
                  <span class="money_cent">￥</span>
                  0.00
                </p>
              </div>
              <div class="count"
                   v-if="item.is_del ==0">
                <span class="box"
                      @tap="cart_fix(item,2)">-</span>
                <span class="box box1">{{item.good_num}}</span>
                <span class="box"
                      @tap="cart_fix(item,1)">+</span>
              </div>
              <div class="count n_count"
                   v-if="item.is_del ==1 || item.is_del ==2">
                <span class="box">-</span>
                <span class="box box1">{{item.good_num}}</span>
                <span class="box">+</span>
              </div>
            </div>
          </div>

        </div>
      </div>
      <div class="zhanwei"></div>
      <!-- <div class="hot">
          <div class="title">

          </div>
      </div> -->
    </scroll-view>
    <div class="bottom"
         v-if="shopList.length > 0">
      <div class="bottom_item">
        <input type="radio"
               class="totalCheck"
               @click="checkAll(allCheck)"
               :checked="!allCheck"
               color="#ff383e" />全选
        <div class="total_bottom"
             v-if="!isFinshed">
          合计:
          <span class="money_cent">￥</span>
          <span class="money">{{totalPrice}}</span>
        </div>
        <button class="calculate"
                v-if="!isFinshed"
                @click="submitOrder"
                :disabled="isDisabled">
          <span class="calculate_con">结算({{shop_fix_num}})</span>
        </button>
        <div class="favorites"
             v-if="isFinshed"
             @click="toFavorites">移入收藏</div>
        <div class="del"
             v-if="isFinshed"
             @click="delmall"
             :disabled="del_Disabled">删除</div>
      </div>
    </div>
  </div>
</template>

<script>
import common from "@/assets/js/mmk_common.js";
export default {
  data () {
    return {
      imgUrl: common.image_response,
      ImgBaseUrl: common.image_resource,
      pageNum: 1,
      allCheck: true,
      shopList: [],
      isChecked: true,
      text: "编辑",
      isFinshed: false,
      totalPrice: 0,
      totalCent: 0,
      isHidden: false,
      isDisabled: false,
      good_num: "",
      checked_array: [],
      shop_fix_num: 0,
      mark: 0,
      status: "", //判断是否为支付后跳过来,
      flag: false,
      del_Disabled: false,
      shop_array: "",
      is_nothing: false
    };
  },
  onLoad (options) {
    this.allCheck = true;
    this.isHidden = false;
    this.flag = false;
    this.pageNum = 1;
    this.totalCent = 0;
    this.totalPrice = 0;
    this.shopList = [];
    wx.setNavigationBarTitle({
      title: "购物车"
    });
    if ((this.status = options.status)) {
      this.status = options.status;
    }
    this.getShopList();
    Object.assign(this.$data, this.$options.data());
  },
  onShow () {
    Object.assign(this.$data, this.$options.data());
    this.allCheck = true;
    this.totalPrice = 0;
    this.totalCent = 0;
    this.getShopList();
  },
  methods: {
    //购物车列表
    getShopList () {
      if (this.flag) {
        return false;
      }
      common.mmk_Loading(0);
      common.fly_post(
        "api/v4_2/shop_cards/index",
        {
          page: this.pageNum,
          pageSize: 1000
        },
        response => {
          common.mmk_Loading(1);
          let res = response.data;
          if (res.status_code == 0) {
            this.mall_num = res.data.total;
            if (res.data.total == 0) {
              this.is_nothing = true;
            }
            if (res.data.data.length == 0 && this.pageNum > 1) {
              common.mmk_Loading(2, "已经到最底下了");
              this.flag = true;
              return false;
            } else if (res.data.data.length > 0 && this.pageNum == 1) {
              this.shopList = res.data.data;
            } else {
              this.shopList.push(...res.data.data);
            }
          } else {
            common.mmk_Loading(1);
            common.mmk_Loading(2, res.message);
          }
        }
      );
    },
    //购物车加减,加type:1，减type：2
    cart_fix (e, type) {
      common.fly_post(
        "api/v4_2/shop_cards/num_handle",
        {
          type: type,
          id: e.id,
          is_activity: e.is_activity
        },
        response => {
          let res = response.data;
          if (res.status_code == 0) {
            if (type == 1) {
              e.good_num++;
            } else if (type == 2) {
              e.good_num--;
            }
            if (e.checked && type == 1) {
              this.shop_fix_num++;
              this.totalPrice = parseFloat(
                (this.totalPrice * 100 + e.price * 100) / 100
              ).toFixed(2);
            } else if (e.checked && type == 2) {
              this.shop_fix_num--;
              this.totalPrice = parseFloat(
                (this.totalPrice * 100 - e.price * 100) / 100
              ).toFixed(2);
            }
          } else {
            common.mmk_Loading(2, res.message);
          }
        }
      );
    },
    //单个选中
    selected (item) {
      if (typeof item.checked == "undefined") {
        this.$set(item, "checked", true);
        this.isHidden = true;
      } else {
        item.checked = !item.checked;
        if (item.checked) {
          this.isHidden = true;
        } else {
          this.allCheck = !item.checked;
        }
      }
      let arr = [];
      let arr1 = [];
      this.shopList.forEach(element => {
        if (element.checked == true) {
          arr1.push(element.good_num);
          arr.push(element.checked);
        }
      });
      if (arr.length == this.shopList.length) {
        this.allCheck = false; //单选框都选中，全选选中
      }
      this.checked_array = arr;
      this.fix_add(arr1);
      this.totalMoney();
    },
    //求和
    fix_add (arr) {
      let s = 0;
      arr.forEach(function (val, idx, arr) {
        s += val;
      }, 0);
      this.shop_fix_num = s;
    },
    shop_det (item) {
      if (item.is_del == 1) {
        common.mmk_Loading(2, "该商品已下架");
      } else {
        wx.navigateTo({
          url: `/pages/package_mall/goods_detail/main?goods_id=${item.good_id}`
        });
      }
    },
    //全选反选
    checkAll (e) {
      this.allCheck = !this.allCheck;
      let _this = this;
      this.shopList.forEach(function (item, index) {
        if (typeof item.checked == "undefined") {
          if (item.is_del == 0) {
            _this.$set(item, "checked", !_this.allCheck);
            _this.isHidden = !_this.allCheck;
          } else {
            _this.$set(item, "checked", !_this.allCheck);
            _this.isHidden = !_this.allCheck;
          }
        } else {
          item.checked = !_this.allCheck;
          _this.isHidden = !_this.allCheck;
        }
      });
      if (e) {
        //结算角标选中数量
        let arr1 = [];
        this.shopList.forEach(element => {
          if (element.is_del == 0) {
            arr1.push(element.good_num);
          }
        });
        this.fix_add(arr1);
      } else {
        this.shop_fix_num = 0;
      }
      this.totalMoney();
    },
    //计算总金额
    totalMoney () {
      var _this = this;
      this.totalPrice = 0;
      this.totalCent = 0;
      this.shopList.forEach(function (item, index) {
        if (item.checked) {
          _this.totalPrice = _this.addition(
            _this.totalPrice,
            item.price * item.good_num
          );
        }
      });
    },
    //金额计算
    addition (arg1, arg2) {
      var r1, r2, m, c;
      try {
        r1 = arg1.toString().split(".")[1].length;
      } catch (e) {
        r1 = 0;
      }
      try {
        r2 = arg2.toString().split(".")[1].length;
      } catch (e) {
        r2 = 0;
      }
      c = Math.abs(r1 - r2);
      m = Math.pow(10, Math.max(r1, r2));
      if (c > 0) {
        var cm = Math.pow(10, c);
        if (r1 > r2) {
          arg1 = Number(arg1.toString().replace(".", ""));
          arg2 = Number(arg2.toString().replace(".", "")) * cm;
        } else {
          arg1 = Number(arg1.toString().replace(".", "")) * cm;
          arg2 = Number(arg2.toString().replace(".", ""));
        }
      } else {
        arg1 = Number(arg1.toString().replace(".", ""));
        arg2 = Number(arg2.toString().replace(".", ""));
      }
      return parseFloat((arg1 + arg2) / m).toFixed(2);
    },
    //编辑按钮
    editBtn (e) {
      this.isFinshed = !this.isFinshed;
      if (this.isFinshed) {
        this.text = "完成";
      } else {
        this.text = "编辑";
        this.totalPrice = 0;
        this.totalCent = 0;
        this.shop_fix_num = 0;
      }
    },
    //删除商品
    delmall () {
      let that = this;
      let array = [];
      that.shopList.forEach(function (item, index) {
        if (item.checked) {
          array.push(item.id);
        }
      });
      if (array.length <= 0) {
        common.mmk_Loading(2, "您还没有选择商品");
        return;
      }
      wx.showModal({
        title: "",
        content: "确认删除商品？",
        success: function (res) {
          if (res.confirm) {
            that.del_Disabled = true;
            let array = [];
            that.shopList.forEach(function (item, index) {
              if (item.checked) {
                array.push(item.id);
              }
            });
            common.fly_post(
              "api/v4_2/shop_good_card/delete",
              {
                ids: JSON.stringify(array)
              },
              response => {
                let res = response.data;
                if (res.status_code == 0) {
                  common.mmk_Loading(2, "删除成功");
                  setTimeout(() => {
                    that.shopList = [];
                    that.del_Disabled = false;
                    that.getShopList();
                  }, 1500);
                } else {
                  that.del_Disabled = false;
                  common.mmk_Loading(2, res.message);
                }
              }
            );
          }
        }
      });
    },
    //添加到收藏夹
    toFavorites () {
      let _this = this;
      let array = [];
      this.shopList.forEach(function (item, index) {
        if (item.checked) {
          array.push(item.good_id);
        }
      });
      setTimeout(() => {
        common.mmk_Loading(0);
        common.fly_post(
          "api/v4_2/shop_good_card/collect",
          {
            ids: JSON.stringify(array)
          },
          response => {
            common.mmk_Loading(1);
            let res = response.data;
            if (res.status_code == 0) {
              common.mmk_Loading(2, "收藏成功");
              setTimeout(() => {
                _this.shopList = [];
                _this.del_Disabled = false;
                _this.getShopList();
              }, 1500);
            } else {
              common.mmk_Loading(1);
              common.mmk_Loading(2, res.message);
            }
          }
        );
      }, 200);
    },
    //提交订单
    submitOrder () {
      let that = this;
      if (that.shop_fix_num == 0) {
        common.mmk_Loading(2, "请选择商品");
        return false;
      }
      common.mmk_Loading(1);
      that.isDisabled = true;
      let array = [];
      that.shopList.forEach(function (item, index) {
        if (item.checked && item.is_del == 0) {
          array.push(item.id);
        }
      });
      that.shop_array = JSON.stringify(array);
      that.comfirmOrder();
      that.isDisabled = false;
    },
    //判断购物车中是否有限购商品
    comfirmOrder () {
      common.fly_post(
        "api/v4_2/shop_order/affirm",
        {
          ids: this.shop_array
        },
        response => {
          let res = response.data;
          if (res.status_code == 0) {
            wx.navigateTo({
              url: `/pages/package_mall/confirm_order/main?sign=2&shop_id=${this.shop_array}`
            });
          } else {
            common.mmk_Loading(2, res.message);
          }
        }
      );
    },
    // 跳转商城首页
    to_mall () {
      wx.reLaunch({ url: '/pages/shop_mall/main' });
    }
  }
};
</script>


<style scoped lang="less">
.container {
  width: 100%;
  height: 100%;
  font-size: 14px;
  color: #888;
  padding-bottom: 48px;
  background: #f3f4f6;
  .none_shop {
    position: absolute;
    left: 38%;
    top: 45%;
  }
  .total {
    height: 40px;
    line-height: 40px;
    padding: 0 15px;
    position: relative;
    .editBtn {
      position: absolute;
      right: 4.5%;
      color: #444;
    }
  }
  .scroll_view {
    padding-bottom: 48px;
    .mall {
      width: 100%;
      box-sizing: border-box;
      display: flex;
      margin-bottom: 10px;
      background-color: #fff;
      .left {
        width: 13.4%;
        height: 100%;
        text-align: center;
        .radio {
          width: 20px;
          height: 20px;
          margin-top: 30px;
        }
      }
      .right {
        width: 86.6%;
        height: 100%;
        box-sizing: border-box;
        padding: 10px 15px 10px 0;
        position: relative;
        display: flex;
        .imgbox {
          .mall_img {
            width: 82px;
            height: 82px;
            border-radius: 3px;
            // background-color: salmon;
            margin-right: 10px;
            vertical-align: top;
          }
          .greay_bg {
            position: absolute;
            top: 8%;
            left: 0;
            width: 82px;
            height: 82px;
            border-radius: 3px;
            margin-right: 10px;
            vertical-align: top;
            background: #000000;
            opacity: 0.5;
          }
        }
        .filterClass {
          -ms-filter: blur(1px);
          -webkit-filter: blur(1px);
          -moz-filter: blur(1px);
          filter: blur(1px);
        }

        .content {
          flex: 1;
          .mall_name {
            color: #444;
            overflow: hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            opacity: 0.9;
            .icon {
              width: 40px;
              height: 14px;
              display: inline-block;
              background: url("https://img.ameimeika.com/h5_images/mp_images/mp_3.0/mall/kuajing.png")
                no-repeat;
              background-size: 100% 100%;
            }
          }
          .plus {
            padding: 0 5px;
            margin: 4px 0;
            line-height: 16px;
            font-size: 10px;
            font-family: "PingFangSC-Medium", "PingFang SC";
            font-weight: 500;
            color: rgba(255, 255, 255, 1);
            background-image: url(https://img.ameimeika.com/h5_images/mp_images/mp_3.0.2/plus_bg%402x.png);
            background-repeat: no-repeat;
            background-size: 100% 100%;
            overflow: hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-line-clamp: 1;
            -webkit-box-orient: vertical;
            display: inline-block;
          }
          .mall_specs {
            color: #666666;
            font-size: 12px;
          }
          .mall_price {
            color: #444;
            width: 100%;
            .pay_type {
              float: left;
              .cent_dk {
                font-size: 12px;
                color: #f64665;
                opacity: 0.9;
              }
              .money {
                font-size: 14px;
                color: #f64665;
                .money_cent {
                  font-size: 10px;
                  position: relative;
                  top: -1px;
                }
              }
            }
            .count {
              float: right;
              vertical-align: bottom;
              .box {
                display: inline-block;
                width: 19px;
                height: 19px;
                line-height: 19px;
                border: 1px solid #ccc;
                text-align: center;
              }
              .box1 {
                width: 23px;
                border-left: none;
                border-right: none;
              }
            }

            .n_count {
              color: #cccccc;
            }
          }
        }
        .mall_status {
          position: absolute;
          font-size: 12px;
          color: #fff;
          top: 36%;
          left: 5%;
          z-index: 9999;
          text-align: center;
          width: 50px;
        }
      }
    }
    .zhanwei {
      width: 100%;
      height: 100px;
    }
  }
  .bottom {
    width: 100%;
    height: 50px;
    box-sizing: border-box;
    position: fixed;
    bottom: 0;
    line-height: 50px;
    .bottom_item {
      background-color: #fff;
      border-top: solid 1px #eeeeee;
      .totalCheck {
        margin-left: 16px;
      }
      .total_bottom,
      .calculate {
        display: inline-block;
        width: auto;
        height: 50px;
        position: absolute;
        right: 0;
        bottom: 0;
      }
      .total_bottom {
        font-size: 12px;
        color: #666666;
        opacity: 0.9;
        right: 28%;
        .money_cent {
          font-size: 12px;
          color: #ff383e;
        }
        .money {
          color: #ff383e;
          font-size: 14px;
        }
      }
      .calculate {
        height: 40px;
        line-height: 37px;
        text-align: center;
        color: #fff;
        right: 12px;
        bottom: 4px;
        font-size: 12px;
        background: #ff383e;
        border-radius: 20px;
        width: 88px;
        .calculate_con {
          display: inline-block;
          margin-left: 3px;
          margin-top: 2px;
          opacity: 0.8;
        }
      }
      .favorites {
        display: inline-block;
        width: 90px;
        height: 32px;
        line-height: 32px;
        border-radius: 16px;
        border: 1px solid #f68b46;
        text-align: center;
        color: #f68b46;
        position: absolute;
        left: 54%;
        top: 17%;
      }
      .del {
        display: inline-block;
        width: 60px;
        height: 32px;
        line-height: 32px;
        border-radius: 16px;
        border: 1px solid rgba(246, 70, 101, 1);
        color: #f64665;
        text-align: center;
        position: absolute;
        right: 10px;
        top: 17%;
      }
    }
  }
}
.empty {
  .img {
    width: 129px;
    display: block;
    margin: 45px auto 12px;
  }
  .msg {
    font-size: 14px;
    font-family: "PingFangSC-Regular", "PingFangSC";
    font-weight: 400;
    color: rgba(153, 153, 153, 1);
    line-height: 20px;
    text-align: center;
  }
  .btn {
    width: 88px;
    height: 32px;
    background: rgba(245, 69, 101, 1);
    border-radius: 22px;
    font-size: 16px;
    font-family: "PingFangSC-Regular", "PingFangSC";
    font-weight: 400;
    color: rgba(255, 255, 255, 1);
    line-height: 32px;
    text-align: center;
    margin: 15px auto 45px;
  }
}
</style>


